<script setup lang="ts">
	import { reactive, ref, onUnmounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { warehouseEntrance } from '@/api/home/index'
	import { timeFormat } from '@/uni_modules/uview-plus';

	const today = ref(new Date());
	const year = ref(today.value.getFullYear());
	const month = ref(today.value.getMonth() + 1);

	// onShow(() => {
	// 	getDetail()
	// })

	const tabIndex = ref(0)
	const towIndex = ref(3)
	const tabIndexData = ref(0)
	const useTabs = () => {
		const tabsColumns = reactive([
			// {
			// 	name: '库存概览',
			// 	id: 1
			// },
			// {
			// 	name: '库存预警',
			// 	id: 2
			// },
			{
				name: '库存明细',
				id: 3
			}
		])
		const tabsList = reactive([
			// {
			// 	name: '日报',
			// 	id: 0
			// },
			{
				name: '月报',
				id: 0
			},
			{
				name: '年报',
				id: 1
			}
		])
		const tabsListData = reactive([
			{
				name: '按商品',
				id: 0
			},
			{
				name: '按分类',
				id: 1
			}
		])
		return {
			tabsColumns,
			tabsList,
			tabsListData
		}
	}
	const { tabsColumns, tabsList, tabsListData } = useTabs()

	const toPage = (id : number) => {
		tabIndex.value = id
		getDetail()
	}
	const toPageData = (id : number) => {
		tabIndexData.value = id
		getDetail()
	}


	const useGetDetail = () => {
		const data = ref()

		const detailInfo = ref({})

		const getDetail = async () => {
			// if (tabIndex.value == 0) {
			// 	data.value = timeFormat(today.value, 'yyyy-mm-dd')
			// }
			if (tabIndex.value == 0) {
				data.value = timeFormat(`${year.value}-${month.value.toString().padStart(2, '0')}`, 'yyyy-mm')
			}
			if (tabIndex.value == 1) {
				data.value = year.value
			}
			const params = {
				type: towIndex.value,
				date: data.value
			}
			const res = await warehouseEntrance(params)
			detailInfo.value = res.data
		}

		return {
			detailInfo,
			getDetail
		}
	}
	const { getDetail, detailInfo } = useGetDetail()

	const paging = ref<ZPagingInstance>()
	const useCURD = () => {
		const dataList = ref([])

		const getList : ZPagingEvent.Query = async (page, limit) => {
			const params = { page, limit, type: towIndex.value }
			try {
				const res = await warehouseEntrance(params)
				paging.value?.complete([...res.data.data])
			} catch (err) {
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction
		}
	}
	const { dataList, getList, searchAction } = useCURD()

	const timeoutId = ref(null)

	const click = (index) => {
		towIndex.value = index.id
		// if (towIndex.value === 1) {
		// 	getDetail();
		// } else
		if (towIndex.value === 3) {
			// timeoutId.value = setTimeout(() => {
			paging.value?.reload();
			// }, 500);

		}

	}

	// 在组件销毁时清除定时器
	onUnmounted(() => {
		if (timeoutId.value !== null) {
			clearTimeout(timeoutId.value);
		}
	});
	// 跳转页面
	const toPageDetail = (url : string) => {
		uni.navigateTo({
			url
		})
	}
</script>

<template>
	<view class="content">
		<view class="user_info_wrap">
			<view class="user-info">
				<view class="avatar-wrap">
					<up-tabs :list="tabsColumns" :activeStyle="{ color: 'rgba(54, 116, 242, 1)' }"
						:itemStyle="{ height: '104rpx', fontSize: '28rpx' }" lineWidth="104rpx"
						lineColor=" rgba(54, 116, 242, 1)" @click="click">
					</up-tabs>
				</view>
			</view>
		</view>
		<view class="main" v-if="towIndex == 1">
			<view class="mian-header">
				<view :class=" tabIndex == index ? 'header-box' : 'header-box1'" v-for="(item, index) in tabsList"
					:key="index" @tap="toPage(item.id)">{{item.name}}</view>
				<!-- <view class="mian-box">
					<view style="display: inline-block;margin-right: 30rpx;">
						<up-text text="今天"></up-text>
					</view>
					<view style="display: inline-block;">
						<up-icon name="arrow-down" color="rgba(109, 108, 112, 1)" size="15"></up-icon>
					</view>
				</view> -->
			</view>
			<view>
				<view class="main-mixn">
					<view class="mixn-foot">
						<view class="foot-box">
							<view class="foot-name">品牌数</view>
							<view class="foot-text">{{detailInfo.brand}}</view>
						</view>
						<view class="foot-box">
							<view class="foot-name">品类数</view>
							<view class="foot-text">{{detailInfo.cate}}</view>
						</view>
						<view class="foot-box">
							<view class="foot-name">库位数量</view>
							<view class="foot-text">{{detailInfo.kw}}</view>
						</view>
						<view class="foot-box">
							<view class="foot-name">商品数量</view>
							<view class="foot-text">{{detailInfo.goods}}</view>
						</view>
					</view>
					<view class="mixn-line"></view>
					<view class="mixn-foot">
						<view class="foot-box">
							<view class="foot-name">临期预警</view>
							<view class="foot-text">{{detailInfo.lq}}</view>
						</view>
						<view class="foot-box">
							<view class="foot-name">过期预警</view>
							<view class="foot-text">{{detailInfo.gq}}</view>
						</view>
						<view class="foot-box">
							<view class="foot-name">报损审核</view>
							<view class="foot-text">{{detailInfo.bs}}</view>
						</view>
						<view class="foot-box">
							<view class="foot-name">等待入库</view>
							<view class="foot-text">{{detailInfo.dd}}</view>
						</view>
					</view>
				</view>
				<!-- <view class="account-main">
					<view class="account-box">
						<view class="acc-name">出库统计</view>
						<view class="acc-box">
							<view class="acc-text">出库单数 </view>
							<view style="font-weight: 700;color: rgba(51, 52, 54, 1);">{{detailInfo.ck?.order}}</view>
						</view>
						<view class="acc-box">
							<view class="acc-text">出库数量 </view>
							<view style="font-weight: 700;color: rgba(51, 52, 54, 1);">{{detailInfo.ck?.num}}</view>
						</view>
						<view class="circular"></view>
						<view class="circular1"></view>
						<view class="circular2"></view>
						<view class="circular-img">
							<image style="width: 80rpx;height: 68rpx;" src="@/static/man/man5.png"></image>
						</view>
					</view>
					<view class="account-box">
						<view class="acc-name">入库统计</view>
						<view class="acc-box">
							<view class="acc-text">入库单数 </view>
							<view style="font-weight: 700;color: rgba(51, 52, 54, 1);">{{detailInfo.rk?.order}}</view>
						</view>
						<view class="acc-box">
							<view class="acc-text">入库数量 </view>
							<view style="font-weight: 700;color: rgba(51, 52, 54, 1);">{{detailInfo.rk?.num}}</view>
						</view>
						<view class="circular"></view>
						<view class="circular1"></view>
						<view class="circular2"></view>
						<view class="circular-img">
							<image style="width: 80rpx;height: 68rpx;" src="@/static/man/man6.png"></image>
						</view>
					</view>
				</view> -->
				<!-- <view class="account-main">
					<view class="account-box">
						<view class="acc-name">其他统计</view>
						<view class="acc-box">
							<view class="acc-text">报损数量 </view>
							<view style="font-weight: 700;color: rgba(51, 52, 54, 1);">1347687</view>
						</view>
						<view class="acc-box">
							<view class="acc-text">报损次数 </view>
							<view style="font-weight: 700;color: rgba(51, 52, 54, 1);">1347687</view>
						</view>
						<view class="circular"></view>
						<view class="circular1"></view>
						<view class="circular2"></view>
						<view class="circular-img">
							<image style="width: 80rpx;height: 68rpx;" src="@/static/man/man7.png"></image>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="main1" v-if="towIndex == 3">
			<!-- <view class="mian-header">
				<view :class=" tabIndexData == index ? 'header-box' : 'header-box1'"
					v-for="(item, index) in tabsListData" :key="index" @tap="toPageData(item.id)">{{item.name}}</view>
			</view> -->
			<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" height="calc(100vh - 139rpx)">
				<view class="main-trith">
					<view class="list">
						<up-row justify="space-between" gutter="10">
							<up-col span="4">
								<up-text text="商品名称" bold></up-text>
							</up-col>
							<up-col span="4">
								<up-text text="售卖库存" bold></up-text>
							</up-col>
							<up-col span="4">
								<up-text text="库内库存" bold></up-text>
							</up-col>
						</up-row>
						<view style="width: 702rpx;height: 2rpx;background: rgba(0, 0, 0, 0.1);margin: 20rpx auto;">
						</view>
						<block v-for="(item,index) in dataList" :key="index">
							<up-row justify="space-between" gutter="10">
								<up-col span="4">
									<up-text :text="item.name" align="left"></up-text>
								</up-col>
								<up-col span="4">
									<up-text :text="item.num" align="left"></up-text>
								</up-col>
								<up-col span="4">
									<up-text :text="item.warehouse_stock" align="left"></up-text>
								</up-col>
							</up-row>
							<view style="width: 702rpx;height: 2rpx;margin: 10rpx auto;">
							</view>
						</block>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
	}

	.user_info_wrap {
		@include flex();
		flex-direction: column;
		justify-content: flex-end;
		gap: 20rpx;
		width: 100%;
		height: 109rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx 0rpx;
		box-sizing: border-box;
	}

	.main {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.mian-header {

			.header-box {
				display: inline-block;
				width: 128rpx;
				height: 56rpx;
				border-radius: 6rpx;
				background: rgba(54, 116, 242, 1);
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
			}

			.header-box1 {
				display: inline-block;
				width: 128rpx;
				height: 56rpx;
				border-radius: 6rpx;
				background: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(19, 20, 21, 1);
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
			}

			.mian-box {
				display: inline-block;
				float: right;
				width: 164rpx;
				height: 56rpx;
				border-radius: 6rpx;
				border: 2rpx solid rgba(207, 207, 207, 1);
				padding: 5rpx 20rpx;
				box-sizing: border-box;
			}
		}

		.main-mixn {
			width: 702rpx;
			height: 266rpx;
			border-radius: 12rpx;
			background: rgba(54, 116, 242, 1);
			margin-top: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;

			.yuan {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				width: 30rpx;
				height: 28rpx;
				opacity: 0.3;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.43);
			}

			.yuan1 {
				position: absolute;
				top: 30rpx;
				right: 50rpx;
				width: 30rpx;
				height: 28rpx;
				opacity: 0.3;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.43);
			}

			.mixn-name {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(241, 245, 249, 1);
			}

			.mixn-qian {
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
				margin-top: 10rpx;
			}

			.mixn-line {
				width: 658rpx;
				height: 2rpx;
				background: rgba(255, 255, 255, 0.1);
				margin: 20rpx 0rpx;
			}

			.mixn-foot {
				display: flex;
				justify-content: space-between;

				.foot-box {
					.foot-name {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}

					.foot-text {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(255, 255, 255, 1);
						margin-top: 10rpx;
					}
				}
			}
		}

		.account-main {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			.account-box {
				width: 338rpx;
				height: 330rpx;
				border-radius: 12rpx;
				background: rgba(255, 255, 255, 1);
				padding: 30rpx;
				box-sizing: border-box;
				position: relative;

				.acc-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(19, 20, 21, 1);
					margin-bottom: 20rpx;
				}

				.acc-box {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.acc-text {
						font-size: 26rpx;
						font-weight: 500;
						color: rgba(109, 112, 115, 1);
					}
				}

				.circular {
					position: absolute;
					top: 60rpx;
					left: -25rpx;
					width: 40rpx;
					height: 18rpx;
					border-radius: 1080rpx;
					background: rgba(242, 243, 245, 1);
				}

				.circular1 {
					position: absolute;
					top: 120rpx;
					left: -25rpx;
					width: 40rpx;
					height: 18rpx;
					border-radius: 1080rpx;
					background: rgba(242, 243, 245, 1);
				}

				.circular2 {
					position: absolute;
					top: 180rpx;
					left: -25rpx;
					width: 40rpx;
					height: 18rpx;
					border-radius: 1080rpx;
					background: rgba(242, 243, 245, 1);
				}

				.circular-img {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					width: 80rpx;
					height: 68rpx;
				}

				.mian-box {
					position: absolute;
					bottom: 20rpx;
				}


			}

		}
	}

	.main1 {
		width: 100%;
		margin-top: 30rpx;

		.mian-header {
			margin: 30rpx;

			.header-box {
				display: inline-block;
				width: 128rpx;
				height: 56rpx;
				border-radius: 6rpx;
				background: rgba(54, 116, 242, 1);
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
			}

			.header-box1 {
				display: inline-block;
				width: 128rpx;
				height: 56rpx;
				border-radius: 6rpx;
				background: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(19, 20, 21, 1);
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
			}

			.mian-box {
				display: inline-block;
				float: right;
				width: 164rpx;
				height: 56rpx;
				border-radius: 6rpx;
				border: 2rpx solid rgba(207, 207, 207, 1);
				padding: 5rpx 20rpx;
				box-sizing: border-box;
			}
		}

		.main-trith {
			width: 100%;
			// height: 90vh;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;

			.list {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				margin: 20rpx 0rpx;
			}
		}
	}
</style>